import React, {Component} from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  Platform,
  Picker,
} from 'react-native';

import Config from '../../config';
import Colors from '../../common/Colors';
import CommonStyles from '../../common/CommonStyles';
import SizeUtils from '../../common/SizeUtils';
import TImage from '../../components/TImage';
import WH_Constants from './WH_Constants';
import BasePage from '../common/BasePage';
import {DateUtils} from '../../utils/Utils';
import CommonShowPickerAction from '../../actions/common/CommonShowPickerAction';

const SORT_ARR=[
  {key:'1',name:'月奖励'},
  {key:'2',name:'年奖励'},
];

export default class WH_WinnerPage extends BasePage {
	constructor(props) {
      super(props);
      const date = new Date();
      this.state = {
        sub_tag:{value:date.getFullYear()},
        sub_qi:{value:'全部'},
        sub_monery:{value:'全部'},
        select_index:0,
      }
      this.tagArr = [];
      this.qiMonthArr = [];
      this.qiYearArr = [];
      this.moneryArr = [];
      this.qiYearArr.push('全年');
      this.qiYearArr.push('上半年');
      this.qiYearArr.push('下半年');
      this.qiMonthArr.push('全部');
      this.moneryArr.push('全部');
      this.tagArr.push('2018');
      this.tagArr.push('2017');
      for (var i = 1; i <= 10; i++) {
        this.moneryArr.push(i*10+'');
      }
      for (var i = 1; i <= 12; i++) {
        this.qiMonthArr.push(i +'');
      }
	}
  _goPage(){
      const year = this.state.sub_tag.value;
      const tip  = this.state.sub_monery.value==='全部'?'':this.state.sub_monery.value;
      const tip_type = this.state.select_index === 0? 1 : 2;
      let month = '';
      let title = ''
      if (tip_type===1) {
        title='月奖励>';
        month= this.state.sub_qi.value==='全部'?'':this.state.sub_qi.value; 
        title+=this.state.sub_qi.value==='全部'?'全部':(this.state.sub_qi.value+'月'); 
      }else{
        title='年奖励>'+this.state.sub_qi.value;
        if (this.state.sub_qi.value==='全年') {
          month='';
        }else if (this.state.sub_qi.value==='上半年') {
          month=13;
        }else{
          month=14;
        }
      }
      this.gotoPage(Config.pages.workHard_winnerlist,{
        year:year,tip:tip,tip_type:tip_type,month:month,titleStr:title,
      })
  }
  render() {
    return (
      <View style={{flex:1,paddingTop:Config.paddingTop,backgroundColor:'#fff'}}> 
          {this._renderNavigationBar()}
          {this._renderTypes()}
          <View style={{
            height:SizeUtils.translateDesignHeightToCode(20),
            backgroundColor:'#eee'}}/>
          <View style={{
              flexDirection:"row",
              borderColor:'#eeeeee',
              borderBottomWidth:SizeUtils.translateDesignHeightToCode(3),
              height:SizeUtils.translateDesignHeightToCode(80),
              justifyContent:"space-around",
            }}>
              {SORT_ARR.map((item,index)=> this._getSortButton(item,index) )}
          </View>
          {this._renderQiTypes()}
          {this._renderMeTypes()}
          {this._renderButtonView()}
      </View>
    );
  }
  _renderButtonView(){
    return(
      <TouchableOpacity style={{
          width:(SizeUtils.getWindowSize.width - SizeUtils.translateDesignWidthToCode(40)),
          backgroundColor:'#ee3535',
          justifyContent: 'center',
          alignItems: 'center',
          borderRadius:4,
          height: SizeUtils.translateDesignHeightToCode(88),
          margin:SizeUtils.translateDesignWidthToCode(30),
        }} onPress={()=>{this._goPage()}}>
        <Text style={{fontSize:SizeUtils.translateFontSizeToCode(30),color:'#fff'}}>{'提交'}</Text>
      </TouchableOpacity>
    );
  }
  _getSortButton(typeData,index) {
     return (
      <TouchableOpacity
        key={typeData.key}
        onPress = {() => {
          if (this.state.select_index!==index) {
            this.setState({
              select_index:index,
              sub_qi:{value:index===0?'全部':'全年'},
            });
          }
        }}
        style={[{
          borderColor:'#eeeeee',
          flex:1,
          alignItems: 'center',
          justifyContent: 'center',
          borderRightWidth:SizeUtils.translateDesignWidthToCode(3)
        }]}>
          <Text style={[CommonStyles.secondaryText,
              {textAlign:"center",color:index===this.state.select_index?'#ee3535':'#000',
              fontSize:SizeUtils.translateFontSizeToCode(30),
              backgroundColor:"#00000000", borderWidth:0,}]}>{typeData.name}
          </Text>
      </TouchableOpacity>
     )
    }
        //选择分类
    _renderTypes() {
     if(Platform.OS === "ios"){
       return  (<TouchableOpacity style={{height:SizeUtils.translateDesignHeightToCode(90),alignItems: 'center',
          borderColor: '#eeeeee',flexDirection:'row',
          marginLeft:SizeUtils.translateDesignWidthToCode(0),
          borderBottomWidth: SizeUtils.translateDesignNumToCode(3),}}
            onPress={this._onPressChooseType.bind(this)}>
          <Text style={{fontSize:SizeUtils.translateFontSizeToCode(32)}}>
            {"    选择年份:  "}
          </Text>
          <Text style={{flex:1,fontSize:SizeUtils.translateFontSizeToCode(32),color: "#666666",}}>
            {this.state.sub_tag.value}
          </Text>
          <TImage source={require("../../../resource/images/home/arrow.png")}
            style={{marginRight:SizeUtils.translateDesignWidthToCode(30),width:19, height:38}}/>
        </TouchableOpacity>)
      }
      else{
       return (
       <View style={{height:SizeUtils.translateDesignHeightToCode(90),
        borderColor: '#eeeeee',flexDirection:"row",alignItems:"center",
        marginLeft:SizeUtils.translateDesignWidthToCode(20),
        borderRightWidth: SizeUtils.translateDesignNumToCode(3),}}>
        <Text style={{textAlign:"center",alignItems:"center",fontSize:SizeUtils.translateFontSizeToCode(32)}}>
          {"    选择年份:  "}
        </Text>
        <View style={{width:SizeUtils.translateDesignWidthToCode(300)}}>
       <Picker
            style={{backgroundColor:"#ffffff00"}}
            selectedValue={this.state.sub_tag.value}
            mode="dialog"
            prompt={'请选择'}
            onValueChange={(value) => this._onPickerCallback(value)}>
            {this.tagArr.map((item, index) =>
              {return(
                <Picker.Item
                style={{fontSize:SizeUtils.translateFontSizeToCode(32),color:'#eeeeee'}}
                  key={index}
                  value={item}
                  label={item}
                />
              )}
            )}

          </Picker></View></View>)
        }

    }
    //选择按期分类
    _renderQiTypes() {
     if(Platform.OS === "ios"){
       return  (<TouchableOpacity style={{height:SizeUtils.translateDesignHeightToCode(90),alignItems: 'center',
          borderColor: '#eeeeee',flexDirection:'row',
          marginLeft:SizeUtils.translateDesignWidthToCode(0),
          borderBottomWidth: SizeUtils.translateDesignNumToCode(3),}}
            onPress={this._onPressQIChooseType.bind(this)}>
          <Text style={{fontSize:SizeUtils.translateFontSizeToCode(32)}}>
            {"    按期分类:  "}
          </Text>
          <Text style={{flex:1,fontSize:SizeUtils.translateFontSizeToCode(32),color: "#666666",}}>
            {this.state.sub_qi.value}
          </Text>
          <TImage source={require("../../../resource/images/home/arrow.png")}
            style={{marginRight:SizeUtils.translateDesignWidthToCode(30),width:19, height:38}}/>
        </TouchableOpacity>)
      }
      else{
        const arr = this.state.select_index===0?this.qiMonthArr:this.qiYearArr;
       return (
       <View style={{height:SizeUtils.translateDesignHeightToCode(90),
        borderColor: '#eeeeee',flexDirection:"row",alignItems:"center",
        marginLeft:SizeUtils.translateDesignWidthToCode(20),
        borderRightWidth: SizeUtils.translateDesignNumToCode(3),}}>
        <Text style={{textAlign:"center",alignItems:"center",fontSize:SizeUtils.translateFontSizeToCode(32)}}>
          {"    按期分类:  "}
        </Text>
        <View style={{width:SizeUtils.translateDesignWidthToCode(300)}}>
       <Picker
            style={{backgroundColor:"#ffffff00"}}
            selectedValue={this.state.sub_qi.value}
            mode="dialog"
            prompt={'请选择'}
            onValueChange={(value) => this._onQIPickerCallback(value)}>
            {arr.map((item, index) =>
              {return(
                <Picker.Item
                style={{fontSize:SizeUtils.translateFontSizeToCode(32),color:'#eeeeee'}}
                  key={index}
                  value={item}
                  label={item}
                />
              )}
            )}

          </Picker></View></View>)
        }
    }
    //选择按期分类
    _renderMeTypes() {
     if(Platform.OS === "ios"){
       return  (<TouchableOpacity style={{height:SizeUtils.translateDesignHeightToCode(90),alignItems: 'center',
          borderColor: '#eeeeee',flexDirection:'row',
          marginLeft:SizeUtils.translateDesignWidthToCode(0),
          borderBottomWidth: SizeUtils.translateDesignNumToCode(3),}}
            onPress={this._onPressMeChooseType.bind(this)}>
          <Text style={{fontSize:SizeUtils.translateFontSizeToCode(32)}}>
            {"    奖金金额:  "}
          </Text>
          <Text style={{flex:1,fontSize:SizeUtils.translateFontSizeToCode(32),color: "#666666",}}>
            {this.state.sub_monery.value}
          </Text>
          <TImage source={require("../../../resource/images/home/arrow.png")}
            style={{marginRight:SizeUtils.translateDesignWidthToCode(30),width:19, height:38}}/>
        </TouchableOpacity>)
      }
      else{
       return (
       <View style={{height:SizeUtils.translateDesignHeightToCode(90),
        borderColor: '#eeeeee',flexDirection:"row",alignItems:"center",
        marginLeft:SizeUtils.translateDesignWidthToCode(20),
        borderRightWidth: SizeUtils.translateDesignNumToCode(3),}}>
        <Text style={{textAlign:"center",alignItems:"center",fontSize:SizeUtils.translateFontSizeToCode(32)}}>
          {"    奖金金额:  "}
        </Text>
        <View style={{width:SizeUtils.translateDesignWidthToCode(300)}}>
       <Picker
            style={{backgroundColor:"#ffffff00"}}
            selectedValue={this.state.sub_monery.value}
            mode="dialog"
            prompt={'请选择'}
            onValueChange={(value) => this._onMePickerCallback(value)}>
            {this.moneryArr.map((item, index) =>
              {return(
                <Picker.Item
                style={{fontSize:SizeUtils.translateFontSizeToCode(32),color:'#eeeeee'}}
                  key={index}
                  value={item}
                  label={item}
                />
              )}
            )}

          </Picker></View></View>)
        }
    }
    _onPressChooseType() {
      new CommonShowPickerAction().call(this, {pickerData:this.tagArr,
       callback:this._onPickerCallback.bind(this)});
    }
    //按期
    _onPressQIChooseType() {
      const arr = this.state.select_index===0?this.qiMonthArr:this.qiYearArr;
      new CommonShowPickerAction().call(this, {pickerData:arr,
       callback:this._onQIPickerCallback.bind(this)});
    }
    _onPressMeChooseType() {
      new CommonShowPickerAction().call(this, {pickerData:this.moneryArr,
       callback:this._onMePickerCallback.bind(this)});
    }
    _onPickerCallback(selectedValue) {
     this.setState({
       sub_tag:{value:selectedValue},
     });
    }
    _onQIPickerCallback(selectedValue) {
     this.setState({
       sub_qi:{value:selectedValue},
     });
    }
    _onMePickerCallback(selectedValue) {
     this.setState({
       sub_monery:{value:selectedValue},
     });
    }
}


